<div id="user-data" style="width: 100%; height: 100%; overflow: auto; white-space: nowrap; text-overflow: ellipsis;" tabindex="-1">
    <p-tree [value]="user_data_tree"
        [class]="disable()"
        selectionMode="single" [(selection)]="selected" 
        (onNodeSelect)="onNodeSelect($event)"
        (onNodeUnselect)="onNodeUnselect($event)"
        (onNodeDoubleClick)="onNodeDoubleClick($event)"
        (onNodeContextMenuSelect)="onNodeContextMenuSelect($event)"
        [contextMenu]="context_menu"
        [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"
        (onNodeDrop)="onNodeDrop($event)"
        (onNodeExpand)="onNodeExpand($event)"
        style="width: 100%; height: 100%; padding: 0; font-size: 12px">
        <ng-template let-node pTemplate="folder">
            <div class="p-d-flex p-ai-center">
                <div class="p-mr-2">
                    @if (node.expanded) {
                        <i class="pi pi-folder-open" (click)="node.expanded = false"></i>
                    } @else {
                        <i class="pi pi-folder-plus" (click)="node.expanded = true"></i> 
                    }                    
                </div>
                <span>{{node.label}}</span>
                <span class="p-ml-2">({{node.children.length}})</span>
            </div>
        </ng-template>
        <ng-template let-node pTemplate="track_line">
            <div class="p-d-flex p-ai-center">
                <img src="{{node.thumbnail}}">
                @if (node.visible) {
                    <span class="p-ml-2" style="font-weight: bold;">{{node.label}}</span>
                } @else {
                    <span class="p-ml-2">{{node.label}}</span>
                }
            </div>
        </ng-template>

        <ng-template let-node pTemplate="way_point">
            <div class="p-d-flex p-ai-center">
                <img src="{{wpt_pins_16[node.pin_index]}}">
                @if (node.visible) {
                    <span class="p-ml-2" style="font-weight: bold;">{{node.label}}</span>
                } @else {
                    <span class="p-ml-2">{{node.label}}</span>
                }
            </div>
        </ng-template>
    </p-tree>
</div>

<p-contextmenu #context_menu [model]="context_menu_items" appendTo="body">
</p-contextmenu>

<p-toast />
<p-confirmdialog />

<p-drawer header="轨迹参数编辑" [(visible)]="show_track_line_edit" position="right" 
        [style]="{'width': '40rem', 'white-space': 'nowrap'}">
    @if (!!selected) {
        <div class="p-d-flex p-flex-column">
            <div class="p-d-flex p-ai-center p-mt-3">
                <div>
                    轨迹名称：
                </div>
                <div class="p-ml-3" style="width: 100%;">
                    <input type="text" pInputText fluid="true" [(ngModel)]="selected.label" [invalid]="!selected.label" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    线条宽度：
                </div>
                <div class="p-ml-3">
                    <p-inputnumber [(ngModel)]="selected.width" showButtons="true" [min]="1" [max]="10" (onInput)="repaint()" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    线条颜色：
                </div>
                <div class="p-ml-3">
                    <p-colorpicker [(ngModel)]="track_line_color" (onChange)="change_track_line_color()" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    显示端点：
                </div>
                <div class="p-ml-3">
                    <p-checkbox [(ngModel)]="selected.draw_endpoints" [binary]="true"  (onChange)="repaint()" />
                </div>
            </div>
        </div>        
    }
</p-drawer>


<p-dialog header="新文件夹名称" [modal]="true" [(visible)]="show_new_folder_dialog" [style]="{ width: '40rem' }">
    <div class="p-d-flex p-flex-column">
        <input type="text" pInputText fluid="true" [(ngModel)]="new_folder_name" [invalid]="!new_folder_name" />
        <div class="p-d-flex p-mt-5">
            <p-button class="p-ml-auto" label="取消" severity="secondary" (onClick)="show_new_folder_dialog = false" />
            <p-button class="p-ml-6" label="确定" [disabled]="!new_folder_name"
                (onClick)="show_new_folder_dialog = false; create_new_folder()" />
        </div>
    </div>
</p-dialog>


<p-dialog header="重命名文件夹" [modal]="true" [(visible)]="show_rename_folder_dialog" [style]="{ width: '40rem' }">
    @if (!!selected) {
        <div class="p-d-flex p-flex-column">
            <input type="text" pInputText fluid="true" [(ngModel)]="rename_folder_name" [invalid]="!rename_folder_name" />
            <div class="p-d-flex p-mt-5">
                <p-button class="p-ml-auto" label="取消" severity="secondary" (onClick)="show_rename_folder_dialog = false" />
                <p-button class="p-ml-6" label="确定" [disabled]="!rename_folder_name"
                    (onClick)="show_rename_folder_dialog = false; selected.label = rename_folder_name" />
            </div>
        </div>        
    }
</p-dialog>


<p-dialog header="设置本文件夹下所有轨迹样式" [modal]="true" [(visible)]="show_folder_style_dialog" [style]="{ width: '40rem' }">
    @if (!!selected) {
        <div class="p-d-flex p-flex-column">
            <div class="p-d-flex p-ai-center">
                <span>线条颜色：</span>
                <p-colorpicker class="p-ml-3" [(ngModel)]="folder_track_line_color" />
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <span>线条宽度：</span>
                <p-inputnumber class="p-ml-3" [(ngModel)]="folder_track_line_width" showButtons="true" [min]="1" [max]="10" />
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <span>显示端点：</span>
                <p-checkbox class="p-ml-3" [(ngModel)]="folder_track_line_draw_endpoints" [binary]="true" />
            </div>
            <div class="p-d-flex p-mt-5">
                <p-button class="p-ml-auto" label="取消" severity="secondary" (onClick)="show_folder_style_dialog = false" />
                <p-button class="p-ml-6" label="确定"
                    (onClick)="show_folder_style_dialog = false; recursive_set_node_style(selected); repaint()" />
            </div>
        </div>        
    }
</p-dialog>

<p-dialog header="选择路点图标" [modal]="true" [(visible)]="show_select_wpt_pin_dialog" [style]="{ width: '900px' }">
    @if (!!selected && selected.type === 'way_point') {
        <div class="p-d-flex p-mt-5 p-mb-6 p-mx-5 p-jc-between">
            @for (pin of wpt_pins_32; track pin.idx) {
                <img src="{{pin.img}}" style="cursor: pointer;" 
                    (click)="selected.pin_index = pin.idx; repaint(); show_select_wpt_pin_dialog = false"> 
            }
        </div>        
    }
</p-dialog>

<p-dialog header="初始化加载数据，请稍候..." [modal]="true" [closable]="false" [closeOnEscape]="false" [(visible)]="show_data_loading_dialog" [style]="{ width: '80%' }">
    <div class="p-mx-3 p-my-6">
        <p-progressBar mode="indeterminate" />
     </div>        
</p-dialog>

<p-dialog header="正在整理轨迹数据，请稍候..." [modal]="true" [closable]="false" [closeOnEscape]="false" [(visible)]="show_data_saving_dialog" [style]="{ width: '80%' }">
    <div class="p-mx-3 p-my-6">
        <p-progressBar mode="indeterminate" />
     </div>        
</p-dialog>
